<template>
    <div class="slot">
        <div>123</div>
        <!-- my-slot  自定义标签 中间插入内容  是不显示的 -->
         <!-- <my-slot>
            <template v-slot:default>
                <button>点击</button>
            </template>
         </my-slot>
          <my-slot>
            <button>删除</button>
         </my-slot>
         <my-slot>
            <h1>首页</h1>
         </my-slot> -->



         <!-- /////////////////////// -->

         <my-slot>
            <!-- #header  v-slot:header   slot="插槽名"   三种都是使用具名插槽的方法 -->
            <template #header> 
                 <h1>静夜思</h1>
            </template>
             <template #default>
                 <h5>床前明月光，</h5>
                 <h5>疑是地上霜，</h5>
                 <h5>举头望明月，</h5>
                <h5>低头思故乡。</h5>

            </template>
            <template #footer>
                 <h2>静夜思-----作者：李白</h2>
            </template>
         </my-slot>
    </div>
</template>
<script>
import mySlot from '../components/mySlot'
export default {
    data() {
        return {
            
        }
    },
    components:{
        mySlot
    }
}
</script>